import React, { useState } from "react";
import { Column, Line, Pie} from '@ant-design/charts';
import { DualAxes } from '@ant-design/plots';
import {PageHeader} from "antd";
import delayTimeModel from "../models/delayTimeModel";
import '../App.css';
function Delay(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        //查询各航空公司平均晚点时长，晚点率
       let getAvgDelayTimeList = async () => {
            var arrayModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/flight/getAvgDelayTimeList?pageSize=1000',
                {
                    method:'GET'
                }
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value) =>{
                let model = new delayTimeModel(value.airAvgDelayMin,value.airCName,value.delayRate,value.delayedFlightNum,value.flightTotal);
                arrayModels.push(model);
            });
            // console.log(data1);
            arrayModels.forEach((value) => {
                console.log(value);
            });
            // console.log(arrayModels);
           setData(arrayModels);
        }
        getAvgDelayTimeList();
    }, []);

    // var config1 = {
    //     autoFit: 'true',
    //     data: data,
    //     xField: 'airCName',
    //     yField: 'delayRate',
    //     label: {
    //         position: 'middle',
    //         style: {
    //             fill: '#FFFFFF',
    //             opacity: 0.6,
    //         },
    //     },
    //     xAxis: {
    //         label: {
    //             autoHide: true,
    //             autoRotate: true,
    //         },
    //     },
    //     meta: {
    //         airCName: { alias: '公司名' },
    //         delayRate: { alias: '晚点率' },
    //     },
    //     scrollbar: { type: 'horizontal' },
    //     slider: {
    //         start: 0.1,
    //         end: 0.5,
    //         trendCfg: {
    //             isArea: true,
    //         },
    //     },
    // };

    var config2 = {
        appendPadding: 10,
        data: data,
        angleField: 'delayedFlightNum',
        colorField: 'airCName',
        radius: 1.0,
        label: { type: 'outer' },
        interactions: [{ type: 'element-active' }],
        meta: {
            airCName: { alias: '公司名' },
            delayedFlightNum: { alias: '晚点航班数' },
        },
    };
    const config3 = {
        data: [data, data],
        xField: 'airCName',
        yField: ['delayRate', 'airAvgDelayMin'],
        meta: {
            delayRate: { alias: '晚点率'},
            airAvgDelayMin: { alias: '平均晚点时长'},
        },
        geometryOptions: [
            {
                geometry: 'column',
                color: '#586bce',
            },
            {
                geometry: 'line',
                color: '#29cae4',
            },
        ],
        xAxis: {
            label: {
                autoRotate: true,
                autoHide: false,
                autoEllipsis: false,
            },
            tickCount: data.length / 2,
        },
        scrollbar: { type: 'horizontal' },
        slider: {
            start: 0.1,
            end: 0.5,
            height:30,
            trendCfg: {
                isArea: true,
            },
        },

    };
    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="航班晚点情况"
            />,
            <Pie {...config2} />
            <DualAxes {...config3} />
        </>
    );
}
export default Delay;
